@namespace DevToys.Blazor.Components
@using DevToys.Core.Tools.ViewItems;
@using DevToys.Core;
@using DevToys.Localization.Strings.MainWindow;

@inherits JSStyledComponentBase
@typeparam TElement
@typeparam TSearchElement

<CascadingValue Name="ParentIsEnabled" Value="@IsActuallyEnabled">
    <div id=@Id
         class="nav-bar-root @(_sidebarState.NavBarClassNames) @(FinalCssClasses)"
         style="@(Style)"
    @ref=Element
    @attributes="AdditionalAttributes">

        <!-- Header -->
        <div class="nav-bar-header">
            <Grid ColumnSpacing="8"
                  Columns="@(new List<UIGridLength>
                    {
                        new UIGridLength(1, UIGridUnitType.Fraction),
                        UIGridLength.Auto
                    })">
                <GridCell Column="0">
                    <StackPanel Orientation="UIOrientation.Horizontal"
                                HorizontalAlignment="UIHorizontalAlignment.Left"
                                MarginTop="-8">
                        <Button Appearance="ButtonAppearance.Stealth"
                                Class="nav-bar-button-icon"
                                Height="36"
                                Width="40"
                                MarginTop="5"
                                MarginRight="0"
                                MarginBottom="0"
                                MarginLeft="5"
                                IsEnabled="@CanGoBack"
                                IsVisible="@(!WindowService.IsCompactOverlayMode)"
                                title="@MainWindow.Back"
                                aria-label="@MainWindow.Back"
                                @onclick="OnBackButtonClicked">
                            <FontIcon Glyph="@('\uF15B')" />
                        </Button>
                        <Button Appearance="ButtonAppearance.Stealth"
                                Class="nav-bar-button-icon"
                                Height="36"
                                Width="40"
                                MarginTop="5"
                                MarginRight="0"
                                MarginBottom="0"
                                MarginLeft="0"
                                IsVisible="@(_sidebarState.IsHidden && !WindowService.IsCompactOverlayMode)"
                                title="@MainWindow.ToggleNavigation"
                                aria-label="@MainWindow.ToggleNavigation"
                                aria-controls="@NavId"
                                aria-expanded="@_sidebarState.IsCollapsed"
                                @onclick="OnToggleSidebarClick">
                            <FontIcon Glyph="@('\uE85F')" />
                        </Button>

                        <div style="margin-left: 4px; display: inline;">
                            @HeaderLeft
                        </div>
                    </StackPanel>
                </GridCell>
                <GridCell Column="1">
                    @HeaderRight
                </GridCell>
            </Grid>
        </div>

        <!-- Sidebar -->
        <nav id="@NavId" class="@(_sidebarState.NavBarClassNames)">
            <div class="sidebar-header">
                <Button Appearance="ButtonAppearance.Stealth"
                        Class="nav-bar-button-icon"
                        HorizontalAlignment="UIHorizontalAlignment.Left"
                        Height="36"
                        Width="40"
                        MarginTop="0"
                        MarginRight="4"
                        MarginBottom="0"
                        MarginLeft="5"
                        IsVisible="@(!_sidebarState.IsHidden)"
                        title="@MainWindow.ToggleNavigation"
                        aria-label="@MainWindow.ToggleNavigation"
                        aria-controls="@NavId"
                        aria-expanded="@_sidebarState.IsCollapsed"
                        @onclick="OnToggleSidebarClick">
                    <FontIcon Glyph="@('\uE85F')" />
                </Button>

                <Button Appearance="ButtonAppearance.Stealth"
                        Class="nav-bar-button-icon"
                        HorizontalAlignment="UIHorizontalAlignment.Left"
                        Height="36"
                        Width="40"
                        MarginTop="6"
                        MarginRight="4"
                        MarginBottom="8"
                        MarginLeft="5"
                        IsVisible="@_sidebarState.IsCollapsed"
                        title="@MainWindow.SearchButtonTootip"
                        aria-label="@MainWindow.SearchButtonAccessibleName"
                        @onclick="OnSearchButtonClick">
                    <FontIcon Glyph="@('\uF68F')" />
                </Button>
                <AutoSuggestBox @ref="_autoSuggestBox"
                                MarginTop="6"
                                MarginRight="17"
                                MarginBottom="12"
                                MarginLeft="16"
                                IsVisible="@(!_sidebarState.IsCollapsed)"
                                Placeholder="@SearchBarPlaceholder"
                                QueryChanged="@SearchQueryChanged"
                                QuerySubmitted="@SearchQuerySubmitted"
                                Items="@SearchResultItems"
                                ItemTemplate="@SearchResultItemTemplate">
                </AutoSuggestBox>
            </div>
            <div class="sidebar-body">
                <ScrollViewer Orientation="UIOrientation.Vertical">
                    <ul class="sidebar-items" role="listbox">
                        @if (MenuItemsSource is not null)
                        {
                            @foreach (TElement item in MenuItemsSource)
                            {
                                <NavBarItem Item="item"
                                            OwnerNavBar="@this"
                                            TElement="TElement"
                                            TSearchElement="TSearchElement"
                                            TitleTemplate="NavBarItemTitleTemplate"
                                            IconTemplate="NavBarItemIconTemplate"
                                            Children="item is IGroup itemGroup ? itemGroup.ChildrenItems : null"
                                            OnSelected="OnItemSelectedAsync"
                                            OnBuildingContextMenu="OnBuildingContextMenuAsync" />
                            }
                        }
                    </ul>
                </ScrollViewer>
            </div>
            <div class="sidebar-footer">
                <ul class="sidebar-items" role="listbox">
                    @if (FooterMenuItemsSource is not null)
                    {
                        <li class="sidebar-item-separator"
                            style="margin-top: 0px;"
                            role="separator" />
                        @foreach (TElement item in FooterMenuItemsSource)
                        {
                            <NavBarItem Item="item"
                                        OwnerNavBar="@this"
                                        TElement="TElement"
                                        TSearchElement="TSearchElement"
                                        TitleTemplate="NavBarItemTitleTemplate"
                                        IconTemplate="NavBarItemIconTemplate"
                                        Children="item is IGroup itemGroup ? itemGroup.ChildrenItems : null"
                                        OnSelected="OnItemSelectedAsync"
                                        OnBuildingContextMenu="OnBuildingContextMenuAsync" />
                        }
                    }
                </ul>
                <div class="custom-footer">
                    @Footer
                </div>
            </div>
        </nav>

        <!-- Content of the nav bar -->
        <main>
            <Container>
                @Content
            </Container>
        </main>

        <!-- A transparent clickable area that appears when the sidebar is expanded overlay. Clicking on it will close the sidebar. -->
        <Overlay Visible="_sidebarState.IsExpandedOverlay"
                 ZIndex="@(10_000 - 1)"
                 OnClick="OnCloseExpandedOverlaySidebarClick" />
    </div>
</CascadingValue>